<template>
	<view>
		<u-cell-group>
			<u-cell-item title='头像' :arrow='false'>
				<view slot='right-icon' class="avater" @tap="chooseAvatar">
					<u-avatar size='80' :src="vuex_user.avater">
					</u-avatar>
				</view>
			</u-cell-item>
			<u-cell-item title='昵称' :arrow='false'>
				<u-input slot='right-icon' :clearable='false' input-align='right ' :placeholder="vuex_user.name"
					v-model="user.name" />
			</u-cell-item>
			<u-cell-item title='用户名' :value="vuex_user.username" :arrow='false'></u-cell-item>
			<u-cell-item title='性别' :arrow='false'>
				<u-input slot='right-icon' :clearable='false' input-align='right ' :placeholder="vuex_user.sex"
					v-model="user.sex" />
			</u-cell-item>
			<u-cell-item title='手机号' :arrow='false'>
				<u-input slot='right-icon' :clearable='false' input-align='right ' :placeholder="vuex_user.phone"
					v-model="user.phone" />
			</u-cell-item>
			<u-cell-item title='微信号' :arrow='false'>
				<u-input slot='right-icon' :clearable='false' input-align='right ' :placeholder="vuex_user.wx"
					v-model="user.wx" />
			</u-cell-item>
		</u-cell-group>
		<u-button class="u-m-20" @click="changeUserInfo">修改信息</u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					name: '',
					avater: '',
					sex: '',
					phone: '',
					wx: ''
				}

			};

		},
		
		onShow() {
			uni.$on('uAvatarCropper', path => {
			this.user.avater = path
				uni.uploadFile({
					url: 'http://localhost:3000/users/uploadAvater',
					filePath: path,
					name: 'userAvater',
					success(res) {
					}
				});

			})
		},
		methods: {
			//获取修改信息接口
			async changeUserInfo() {
				const {
					data
				} = await this.$u.api.changeUserInfo({
					name:this.user.name?this.user.name :this.vuex_user.name,
					avater:this.user.avater?this.user.avater:this.vuex_user.avater,
					sex:this.user.sex?this.user.sex:this.vuex_user.sex,
					phone:this.user.phone?this.user.phone:this.vuex_user.phone,
					wx:this.user.wx?this.user.wx:this.vuex_user.wx,
				})
				if (data.code == 200) {
					await this.$u.utils.updateUser()
					this.$u.toast(data.msg)
				}

			},

			//头像裁剪
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #eee;

		/deep/.u-cell-item-box {
			margin: 50rpx 0;

			.u-cell_title {
				padding-left: 5rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
